<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#image-container{
				width: 400px;
				height: 500px;
				position: absolute;
			}
			#image-container img{
				width: 100%;height: 100%;
				object-fit: contain;
				cursor: pointer;
			}
			#text{
				width: 800px;
				height: 300px;
				/* border: 1px solid black; */
				position: absolute;
				left: 400px;
				top: 70px;
			}
			#text p{
				font-size: 23px;
				font-style: italic;
			}
			.p1{
				color: #747474;
			}
		</style>
	</head>
	<body>
		<div id="image-container">
			<img id="current" src="xiao.jpg" alt="点击" title="萧容鱼">
		</div>
		<div id="text">
			<p class="pt" style="font-weight: bold">小鱼儿</p>
			<p class="pt p1">就是想起我们认识这么久，从来没有一张合照，稀罕得好像你从没在我人生里出现过一样；</p>
			<p class="pt p1">“小陈，你说我们这样是不是一不小心就走到了白头”；</p>
		</div>
		<script>
			const images = ["xiao.jpg","shen.jpg"];
			var currentIndex = 0;
			//获取元素
			var imgelement = document.querySelector('#current');
			var textelement = document.getElementsByClassName('pt')
			imgelement.addEventListener("click",function(){
				currentIndex = (currentIndex + 1) % 2;
				imgelement.src = images[currentIndex];
				if(currentIndex == 0){
					imgelement.title = "萧容鱼" ;
					textelement[0].textContent = '小鱼儿';
					textelement[1].textContent = '就是想起我们认识这么久，从来没有一张合照，稀罕得好像你从没在我人生里出现过一样；';
					textelement[2].textContent = '“小陈，你说我们这样是不是一不小心就走到了白头”；';
				}else{
					imgelement.title = "沈幼楚";
					textelement[0].textContent = '憨憨楚';
					textelement[1].textContent = '"阿姐，你的眼睛那么大，可以装的下白云，可以装的下蓝天，可以装的下楼房，可是为什么阿哥惹你伤心的时候，却连眼泪也装不住啊?”';
					textelement[2].textContent = '“因为.....他们都没有阿哥重要呀”	';
				}
			})
		</script>
	</body>
</html>